﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Knockout binding </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Knockout binding ">
    <meta name="generator" content="docfx 2.40.7.0">
    
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">

<a href="https://github.com/NeutroniumCore/Neutronium" target="_blank">
  <img style="position: fixed; top: 0; right: 0; border: 0; z-index:99999" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
<h1 id="knockout-binding">Knockout binding</h1>
<p>See complete example at: <a href="https://github.com/NeutroniumCore/Neutronium/tree/master/Examples/Example.ChromiumFX.Ko.UI">Example.ChromiumFX.Ko.UI</a></p>
<p>Knockout binding is provided by the <code>Neutronium.JavascriptFramework.Knockout</code> assembly that exposes the injector:<br>
<code>KnockoutFrameworkManager</code>   registered name <strong>KnockoutInjector</strong><br></p>
<p>Given the following ViewModel:</p>
<pre><code class="lang-CSharp">public class Skill
{
	public string Type { get;}
	public string Name { get;}

	public Skill (string name, string skillType)
	{
		Name = name;
		Type = skillType;
	}
}

public class Person: ViewModelBase
{
	private string _Name;
	public string Name
	{
		get { return _Name; }
		set { Set(ref _Name, value, &quot;Name&quot;); }
	}

	private Skill _MainSkill;
	public Skill MainSkill
	{
		get { return _MainSkill; }
		set { Set(ref _MainSkill, value, &quot;MainSkill&quot;); }
	}
	   
	public IList&lt;Skill&gt; Skills { get; private set; }

	public ICommand RemoveSkill { get; private set; }
	
	public Person()
	{
		Skills = new ObservableCollection&lt;Skill&gt;();
		RemoveSkill = new RelayCommand&lt;Skill&gt;(s=&gt; this.Skills.Remove(s));
	}	  
}
</code></pre>
<h2 id="bind-to-a-property">Bind to a property:</h2>
<pre><code class="lang-HTML">&lt;span data-bind=&quot;text:Name&quot;&gt;&lt;/span&gt;
</code></pre>
<h2 id="bind-to-a-nested-property">Bind to a nested property:</h2>
<pre><code class="lang-HTML">&lt;span data-bind=&quot;Skill().Name&quot;&gt;&lt;/span&gt;
</code></pre>
<h2 id="bind-to-a-collection">Bind to a Collection:</h2>
<pre><code class="lang-HTML">&lt;div data-bind=&quot;foreach: Skills()&quot;&gt;
     &lt;div &gt;&lt;span data-bind=&quot;text:Type&quot;&gt;&lt;/span&gt;&lt;/div &gt;
&lt;/div&gt;
</code></pre>
<p>Note that you need the parenthesis as arrays are mapped to observable value which value is an observable array.</p>
<h2 id="bind-to-a-command-with-custom-binding-">Bind to a Command with custom binding :</h2>
<pre><code class="lang-HTML">&lt;button data-bind=&quot;command: $data.RemoveSkill&quot;&gt;&lt;/button&gt;
</code></pre>
<p>By default the command will be called if CanExecute is true on click with element context as command argument.</p>
<h2 id="bind-to-a-command-with-custom-binding--1">Bind to a Command with custom binding :</h2>
<pre><code class="lang-HTML">&lt;button data-bind=&quot;command: $data.RemoveSkill&quot;&gt;&lt;/button&gt;
</code></pre>
<p>The command will be called if CanExecute is true on click with element context as command argument.</p>
<h2 id="bind-to-a-command-with-custom-binding-on-different-event">Bind to a Command with custom binding on different event:</h2>
<pre><code class="lang-HTML">&lt;button data-bind=&quot;command: $data.RemoveSkill, commandoption: { event:'dblclick'}&quot;&gt;
&lt;/button&gt;
</code></pre>
<p>This will call Execute if CanExecute is true with element context as parameter on button double click.</p>
<h2 id="special-hook">Special Hook</h2>
<p>It is possible to create a register method on the global ko object.
This method should take one argument which is the ViewModel.
It will called before calling ko.applyBindings, so it can be used to register computed properties.</p>
<p>Example:</p>
<pre><code class="lang-javascript">ko.register = function (vm) {
   vm.count = ko.computed( function() {
       return this.Skills().length;
   }, vm);
}
</code></pre>
</article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/NeutroniumCore/Neutronium/blob/master/Documentation/Neutronium.Documentation/binding/knockout.md/#L1" class="contribution-link">Improve this Doc</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            
            <span>Generated by <strong>DocFX</strong></span>
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
  </body>
</html>
